<template>
  <!-- 与父组件传来的modelValue绑定 -->
  <!-- 无法直接修改父组件传递的值，当改变时 emit 通知父组件，并传递 $event 数据 -->
  <el-select
    :style="{ width: width }"
    :modelValue="modelValue"
    @update:modelValue="emit('update:modelValue', $event)"
  >
    <!-- label是展示给用户看的 value是最终传递服务器的数据 -->
    <el-option
      v-for="item in channelList"
      :key="item.id"
      :label="item.cate_name"
      :value="item.id"
    ></el-option>
    <!-- <el-option label="体育" value="137"></el-option> -->
  </el-select>
</template>
<script lang="ts" setup name="">
import { ref } from 'vue'
import { artGetChannelsService } from '@/api/article'
//获取文章分类

const channelList = ref([{ id: 0, cate_name: '', cate_alias: '' }])
const getChannelList = async () => {
  const res = await artGetChannelsService()
  // console.log(res.data.data)
  channelList.value = res.data.data
}
getChannelList()

defineProps({
  modelValue: {
    type: [String, Number]
  },
  //设置宽度
  width: { type: String }
})

const emit = defineEmits(['update:modelValue'])
</script>
<style scoped></style>
